<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03 table添加删除小案例</title>
    <style>
        * {
            margin: 5px;
            padding: 0;
        }
        
        #box {
            margin: 0 auto;
            padding: 5px;
            width: 600px;
            border: 1px solid red;
            background-color: rgb(238, 235, 235);
        }
        
        table {
            width: 100%;
            text-align: center;
            line-height: 30px;
        }
        
        button {
            border-radius: 4px;
            border: 2px solid blueviolet;
            padding: 0 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="header">
            <input type="text" id="userName" placeholder="请输入用户名">
            <input type="text" id="age" placeholder="请输入年龄">
            <button type="button" id="btn">添加</button>
        </div>

        <table border="1" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1</td>
                    <td>小黑</td>
                    <td>22</td>
                    <td><button type="button" onclick="del()">删除</button></td>
                </tr> -->
            </tbody>
        </table>
    </div>

    <script>
        var userName = document.getElementById('userName');
        var age = document.getElementById('age');
        var btn = document.getElementById('btn');

        var tbody = document.querySelector('tbody');

        var arr = []
        var str = '';

        //添加
        btn.onclick = function() {
            var obj = {
                id: +new Date(),
                userName: userName.value,
                age: age.value
            }
            arr.push(obj);
            userName.value = '';
            age.value = '';

            show(arr);
        }

        //渲染
        function show(arr) {
            str = '';
            for (var i = 0; i < arr.length; i++) {
                str += `
                <tr>
                    <td>${i + 1}</td>
                    <td>${arr[i].userName}</td>
                    <td>${arr[i].age}</td>
                    <td><button type="button" onclick="del(${arr[i].id})">删除</button></td>
                </tr>
                `;
            }
            tbody.innerHTML = str;
        }

        //删除
        function del(Id) {
            for (var i = 0; i < arr.length; i++) {
                if (Id == arr[i].id) {
                    arr.splice(i, 1);

                    show(arr);
                }
            }
        }

        // window.onload = function() {
        //     var getArr = localStorage.arrDate;
        //     if ()
        //         arr = JSON.parse(getArr);
        //     show(arr);
        // }
    </script>
</body>

</html>